<template>
    <div class="login" :style="{backgroundImage: 'url(' + loginBack + ')'}">
        <div :class="{ active: isFocus }">
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zhanghu"></use>
                </svg>
                <input type="number" id="loginname" maxlength="11" placeholder="请输入手机号" v-model="loginname" v-on:focus="inputFocus" v-on:blur="isFocus = false">
            </div>
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-mima"></use>
                </svg>
                <input type="password" id="password" placeholder="请输入密码" v-model="password" v-on:focus="inputFocus" v-on:blur="isFocus = false">
            </div>
            <div class="identifyinCode">
                <input type="text" id="imgCode" placeholder="请输入验证码" v-model="imgCode" v-on:focus="inputFocus" v-on:blur="isFocus = false">
                <img :src="identifyinCode" v-on:click="newIdentifyinCode">
            </div>
            <span class="errMsg">{{errMsg}}</span>
            <div class="loginBtn" v-on:click="submitForm">登陆</div>
        </div>
    </div>
</template>

<script>
import qs from "qs";
import router from '@/router'

export default {
    name: 'login',
    data: function () {
        return {
            loginBack: require("@/assets/loginBack.png"),
            loginname: "",
            password: "",
            imgCode: "",
            isMobile: 1,
            token: "",
            isFocus: false,
            identifyinCode: "http://return.binhetouzi.com/getCode.do?token=",
            errMsg: ""
        }
    },
    mounted: function () {
        this.newIdentifyinCode()
    },
    methods: {
        inputFocus() {
            this.errMsg = '';
            this.isFocus = true;
        },
        guid() {
            function s4() {
                return Math.floor((1 + Math.random()) * 0x10000)
                    .toString(16)
                    .substring(1);
            }
            this.token = s4() + s4() + '-' + s4() + '-' + s4() + '-' +
                s4() + '-' + s4() + s4() + s4();
            return this.token;
        },
        newIdentifyinCode() {
            this.token = this.guid();
            this.identifyinCode = "http://return.binhetouzi.com/getCode.do?token=" + this.token;
            return this.identifyinCode
        },
        showImg() {
            this.newIdentifyinCode();
        },
        submitForm() {
            var param = {
                isMobile: this.isMobile,
                loginname: this.loginname,
                password: this.password,
                imgCode: this.imgCode,
                token: this.token
            }
            if (this.loginname.length != 11) {
                this.errMsg = "请输入正确的手机号";
                return false
            }
            if (this.imgCode.length != 4) {
                if (this.imgCode.length == 0) {
                    this.errMsg = "请输入验证码"
                } else {
                    this.errMsg = "验证码错误"
                }
                return false
            }
            param = qs.stringify(param);
            var _this = this
            this.$ajax.post("/tologin.do", param).then(function (retData) {
                if (retData.data.errMsg) {
                    console.log(retData,"false");
                    _this.errMsg = retData.data.errMsg;
                    _this.newIdentifyinCode();
                    return false
                };
                window.sessionStorage.clear();
                window.localStorage.clear();
                window.sessionStorage.setItem('userInfo', retData.data.data);
                window.localStorage.setItem("memberId", retData.data.data.id);
                window.localStorage.setItem("loginname", retData.data.data.loginname);
                window.localStorage.setItem("truename", !retData.data.data.truename ? "" : retData.data.data.truename);
                window.localStorage.setItem("telphone", !retData.data.data.telphone ? "" : retData.data.data.telphone);
                window.localStorage.setItem("cardcode", !retData.data.data.cardcode ? "" : retData.data.data.cardcode);
                window.localStorage.setItem("email", !retData.data.data.email ? "" : retData.data.data.email);
                window.localStorage.setItem("recommandPerson", !retData.data.data.recommandPerson ? "" : retData.data.data.recommandPerson); //我的推荐人
                window.localStorage.setItem('plainpassword', retData.data.data.plainpassword); //我的推荐码
                router.push({ path: '/yeji' })
            }).catch(function (error) {
                _this.errMsg = error;
            })
        }

    },
    // beforeMount: {
    //     this.guid()
    // }

}
</script>

<style>
.errMsg {
    position: fixed;
    text-align: center;
    width: 100%;
    top: 11.1rem;
    color: red
}

.login,
.login>div {
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    z-index: 99999
}

div.active {
    top: -5rem
}

.login>div>div {
    /* align-items:center; */
    width: 70%;
    height: 1.24rem;
    margin: 0 auto;
    margin-bottom: 0.41rem;
    position: relative;
    top: 6rem;
}

.login .icon {
    position: absolute;
    left: 0.74rem;
    top: 0.3rem;
    color: #5b667f;
    font-size: .6rem
}

.login input {
    border: none;
    background: white;
    border-radius: 50px;
    height: 100%;
    width: 100%;
    box-shadow: 0 0 18px rgba(0, 0, 0, .13);
    padding-left: 1.6rem;
    font-size: 0.3rem
}

.identifyinCode {
    justify-content: space-between
}

.identifyinCode input {
    width: 57%;
    padding-left: 0.8rem
}

.identifyinCode img {
    width: 39%;
    position: absolute;
    top: 0.3rem;
    right: 0;
    margin: 0;
    border-radius: 50px;
    box-shadow: 0 0 18px rgba(0, 0, 0, .13);
}

.login div.loginBtn {
    background: #333a4b;
    color: white;
    font-size: 0.36rem;
    text-align: center;
    line-height: 1.24rem;
    border-radius: 50px;
    box-shadow: 0 0 40px rgba(51, 58, 75, .72);
    top: 7rem
}
</style>
